Documentation

Cocoon - Modern WooCommerce WordPress Theme

Version 1.0 - Designed & Developed by Gino Aliaj

Thank you for purchasing my WordPress Theme. If you have any questions that are beyond the scope of the documentation, please feel free to email via the contact form from my user page here on ThemeForest. Thank you very much!

1.1 Description

Cocoon is a Clean, Professional & Modern WooCommerce WordPress Theme for online Shopping Stores. We have been working really hard to deliver a clean and unique looking WordPress theme which will impress all of your Customers and give you a better chance to grow your income from your Online Store.

It contains lots of components, a unique design, FREE included plugins (134$ worth) and an easy to use admin panel which gives the user the best experience.


Enjoy!

1.2 WordPress Information

To install this theme you must have a working version of WordPress already installed. You should ALWAYS be running the latest version of WordPress, otherwise you put your whole site at risk for potential threats in case using an outdated version of WordPress.

If you need help installing WordPress, follow the instructions in WordPress Codex. Below are all the useful links for WordPress information.

1.3 PHP Configuration Limits

Many issues that you may run into such as; white screen, demo content fails when importing, empty page content and other similar issues are all related to low PHP configuration limits. The solution is to increase the PHP limits. You can do this on your own, or contact your web host and ask them to increase those limits to a minimum as follows:

  • max_execution_time: 180
  • memory_limit: 128M
  • post_max_size: 32M
  • upload_max_filesize: 32M

1.4 Included files

Below is a full list of everything that is included when you download the main files, along with a brief description of each item.

  1. cocoon.zip: main theme file that needs to be uploaded to install Cocoon Theme.
  2. cocoon-child.zip: basic child theme of Cocoon Theme. It is created for people who want to customize the source code of the Theme. - Highly Recommended
  3. Demo Data:
    • Content.xml - Contains all sample data
    • widgets.wie - This file contains all widgets which are exported from our demo.
    • rev-sliders - Cocoon main sliders.

2. How to install your Theme

After you download the package from ThemeForest, please unzip it. You’ll see a file called cocoon.zip, which needs to be uploaded and installed.

Important: One of the most common reasons people have issues is because they try uploading the full zip that includes demo content, theme, documentation…etc which displays the “The package could not be installed. The theme is missing the style.css stylesheet.” error. Please make sure you upload only the theme which is called cocoon.zip.

Install Cocoon via WordPress

Step 1 – Log into your WordPress website and go to Appearance > Themes and click Add New.

Step 2 – Click Upload Theme.

Step 3 – Browse the cocoon.zip file on your computer and click Install Now.

Step 4 – After the theme was installed successfully, just click activate it.

If you get the “Are You Sure You Want To Do This” message when installing cocoon.zip file via WordPress, it means you have an upload file size limit. You need to install the theme via FTP, or contact your hosting provider to increase the limit.

Install Cocoon via FTP

Step 1 – Unzip the cocoon.zip file, you’ll get a folder Cocoon.

Step 2 – Log into your hosting space via an FTP software (Use a FTP client like FileZilla).

Step 3 – Upload that folder to wp-content/themes folder on your host.

Step 4 – Go to Appearance > Themes and activate the Cocoon Theme.

3.1 Getting Started

After activating the Theme you will be redirected to a Welcome page. This page will have everything related on how you will setup your website to get the same result as the main demo.

3.2 Install Plugins

After getting redirect you will need to install all required plugins. To do so click on the "Install Plugins" Tab and on the button of the page the "Install & Active" button.

3.3 Import Content

Step 1 - After installing all required plugins please click on the "Import" tab.


Step 2 - Make sure that all of the Lights are showing Green, else you will have issue while importing the demo.


Step 3 - Check all the boxes and click the "Import Data" button.

Mailchimp Form:

  • Go to MailChimp for WP -> Forms
  • Click Save Changes without changing anything

4. Updates

There are 3 ways to update your theme: use Envato Market Plugin for automatic theme updates and manual update the theme via FTP or WordPress.

Important: After updating the theme, all your content such as pages, options, images and posts will not be lost or erased. However, any customizations to the theme’s core files, such as PHP files, language files will be lost. So you need to the child theme to customize the theme and backup the lang file if you translated the theme.

4.1 Method 1: Automatic Updates via The Envato Market Plugin

The Envato Market plugin can install WordPress themes and plugins purchased from ThemeForest & CodeCanyon by connecting with the Envato Market API using a secure OAuth personal token. Once your themes & plugins are installed WordPress will periodically check for updates, so keeping your items up to date is very simple.

Step 1 – Make sure you have installed and activated all required plugins. (Envato Market Plugin is packed in the Theme)

Step 2 – If you translated the theme and the language files are in themes/cocoon/lang/, you need to upload them to wp-content/languages/themes/. If not, After updating the theme, any customizations to the theme’s core files, such as PHP files, language files will be lost.

Step 3 - Click the Envato Market menu in WordPress and connect to the API.

Video Tutorial

4.2 Method 2: Manual Update Via WordPress

Everything is explained in detail here.

4.2 Method 3: Manual Update Via FTP

Everything is explained in detail here.

5.1 Main Colors

Go to Appearance > Customize > General Options > Color Options > Custom CSS

5.2 Page Headers

If you want to customize Page Headers go to:

Appearance > Customize > General Options > Page Header Options

5.3 Logo

If you want to change your logo go to:

Appearance > Customize > Header Options > Logo

6. Header Options

If you want to customize the header and make your menu sticky, disable certain header buttons, disable ajax search etc. Go to:

Appearance > Customize > Header Options > Header Options

8.1 General Blog Options

Go to Appearance > Customize > Blog Options > General Blog Options

Choose the layout that you want.

8.2 Single Blog Page Options

Go to Appearance > Customize > Blog Options > Single Blog Page Options

Customize your single blog post.

9.1 Getting Started

All information on how to use WooCommerce can be found in the links below:

9.2 Main Shop Page

The main Shop page options can be found here:

Appearance > Customize > WooCommerce > Shop Layout

9.3 Product Option

To customize how the products shown up in pages as like shope, product category etc. Go to:

Appearance > Customize > WooCommerce > Product Grid

9.4 Product Badges

If you want to disable or customize the badges that are shown in the products go to:

Appearance > Customize > WooCommerce > Badges

9.5 Single Product Page

To customize the single product page go to:

Appearance > Customize > WooCommerce > Single Product

10.1 Troubleshooting Theme Installation

Cocoon should be installed without any errors if you follow all in instructions, but here are the most common errors and the solutions:


The package could not be installed. The theme is missing the style.css stylesheet.

One of the most common reasons people have issues is because they try uploading the full zip that includes demo content, theme, documentation...etc which displays the “The package could not be installed. The theme is missing the style.css stylesheet.” error. Please make sure you are uploading only the installable theme which is called cocoon.zip.


Are you sure you want to do this?

It means you have an upload file size limit. You need to install the theme or plugins via FTP, or contact your hosting provider to increase the limit.


White Screen Of Death or PHP Error Notice

A “white screen of death” happens when there is a PHP error on the site but WP_Debug isn’t enabled on the server. So the first thing to do would be to enable WP_Debug so you can read what the actual error is and thus fix the problem.

10.2 Troubleshooting Demo Content

Demo Content Import Fails

If the import stalls and fails to respond after a few minutes, or it fails with a simple error message like Import failed, You are suffering from PHP configuration limits that are set too low to complete the process. You should contact your hosting provider and ask them to increase those limits to a minimum as follows:

  • max_execution_time: 180
  • memory_limit: 128M
  • post_max_size: 32M
  • upload_max_filesize: 32M

500 Internal Server Error

There are many reasons why these errors occur in WordPress. One of the reasons it is PHP memory limits set too low. You should contact your hosting provider and ask them to increase those limits to a minimum as follows:

  • max_execution_time: 180
  • memory_limit: 128M
  • post_max_size: 32M
  • upload_max_filesize: 32M

Demo Content Duplicated

When you import our demo content, it can take several minutes depending on the speed of your server. Each time the button is clicked it will import the content, so if it is clicked twice it will import everything two times. There are two ways to get rid of duplicate content.

Method 1: WP Reset Plugin – This plugin is the fastest way to get rid of content. However, it will remove all content from your database and leave the default theme activated. It does not remove plugins, but will deactivate them and remove all pages, posts, menus, sliders, widget data,  etc. Basically it removes all the content that you imported from our theme. Only do this if you are able to start over. Click Here To Download.

Method 2: Manual Removal – This method will take longer and simply involves manually removing duplicate items. For example, go to the Appearance > Menu and delete and duplicate items one by one. Same thing for pages, post, sliders, etc.

11. Sources & Credits

Icons

Free Font Based Icons by Font Awesome

Free Font Based Icons by Simple Line Icons

Premium Font Based Icons - $59 worth by Iconsmind


Image, Vectors & Mockups

Included Plugins

Please Note: All images are just used for Preview Purpose Only. They are not part of the theme and NOT included in the final purchase files.

12. Support

If you have any questions regarding the Theme or if you have any suggestions about what you might want to be added in the future updates please don't hesitate to contact me directly via e-mail form on my profile page.


Hope you enjoy my Theme and please don't forget to Rate. Thank you very much!